<template>
  <div class="app-container">
    <el-dialog
      v-model="dialogVisible"
      title="卡券发放列表"
      width="80%"
      :show-close="false"
      :append-to-body="true"
      :close-on-click-modal="false"
      v-dialog-drag
    >
      <el-form
        ref="queryFormRef"
        :model="queryParams"
        label-width="80px"
        :inline="true"
        label-position="left"
      >
        <el-form-item>
          <span>卡券名称: {{ name }}</span>
          <span style="margin-left: 10px">类型: {{ typeName }}</span>
          <span style="margin-left: 10px">发放对象: {{ unitName }}</span>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="queryParams.mobile"
            placeholder="请输入手机号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item class="search_btn">
          <el-button type="primary" @click="handleQuery">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="list" v-loading="loading">
        <el-table-column label="用户名" align="center" prop="userName" show-overflow-tooltip/>
        <el-table-column label="手机号" align="center" prop="mobile" show-overflow-tooltip/>
        <el-table-column label="领取时间" align="center" prop="createTime" show-overflow-tooltip/>
        <el-table-column label="卡券状态" align="center" prop="state" show-overflow-tooltip>
          <template #default="{ row }">
            <div v-if="row.state == 0">未使用</div>
            <div v-if="row.state == 1" style="color: rgba(42, 130, 228, 1);">已使用</div>
            <div v-if="row.state == 2" style="color: rgba(166, 166, 166, 1);">已过期</div>
          </template>
        </el-table-column>
        <el-table-column label="开始日期" align="center" prop="startTime" show-overflow-tooltip/>
        <el-table-column label="结束日期" align="center" prop="endTime" show-overflow-tooltip/>
        <el-table-column label="操作" width="80">
          <template #default="{ row }">
            <div class="table_btn">
              <el-button
                type="text"
                class="primary_text"
                @click="handleView(row)"
              >详情
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="queryParams.total > 0"
        :total="queryParams.total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleUpdateClose">取消</el-button>
        </div>
      </template>
    </el-dialog>

    <card-use-history-dialog
      v-if="cardUseHistory"
      ref="cardUseHistoryDialogRef"
      @refreshShow="handleRefreshShow"
    >
    </card-use-history-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { cardPage } from '@/api/coupon/coupon'
import CardUseHistoryDialog from './cardUseHistoryDialog.vue'

// 定义 emits
const emit = defineEmits(['refreshShow'])

// 定义响应式数据
const dialogVisible = ref(false)
const name = ref('')
const typeName = ref('')
const unitName = ref('无')
const loading = ref(false)
const list = ref<any[]>([])
const cardUseHistory = ref(false)
const cardUseHistoryDialogRef = ref<InstanceType<typeof CardUseHistoryDialog> | null>(null)

const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 0,
  couponsId: null as number | null,
  mobile: null as string | null
})

// 查询列表
const getList = () => {
  loading.value = true
  cardPage(queryParams)
    .then(res => {
      list.value = res.rows
      queryParams.total = res.total
      if (list.value.length > 0 && list.value[0].unitName && list.value[0].unitName !== '') {
        unitName.value = list.value[0].unitName
      }
    })
    .catch(() => {
      // 错误处理
    })
    .finally(() => {
      loading.value = false
    })
}

// 初始化方法
const init = (id: number, n: string, type: string) => {
  queryParams.couponsId = id
  name.value = n
  typeName.value = type
  dialogVisible.value = true
  getList()
}

// 查询
const handleQuery = () => {
  getList()
}

// 查看详情
const handleView = (row: any) => {
  cardUseHistory.value = true
  cardUseHistoryDialogRef.value?.init(row.id)
}

// 刷新table
const handleRefreshShow = () => {
  cardUseHistory.value = false
  getList()
}

// 关闭
const handleUpdateClose = () => {
  dialogVisible.value = false
  emit('refreshShow')
}

// 定义暴露的方法
defineExpose({
  init
})
</script>

<style scoped lang="scss">

</style>